<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="郝珍华">
    <title></title>
    <style>
        .box {
            width: 300px;
            height: 650px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .shang {
            width: 300px;
            height: 60px;
            border: 1px solid #ccc;
            background-color: #ccc;
        }

        .shang .zhuang {
            font-size: 30px;
            line-height: 60px;
            margin-left: 80px;
        }

        .xia {
            width: 300px;
            height: 638px;
            /* border:1px solid red; */
            position: relative;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li {



            margin: 40px 60px;
        }

        .ziti {
            width: 180px;
            height: 30px;
            position: absolute;
            top: 0px;
        }

        .ziti .bottom {
            background-color: lightcoral;
            z-index: 1000;
        }

        .ziti1 .bottom {
            background-color: lightcoral;
            z-index: 1000;
        }

        .ziti1 {
            width: 180px;
            height: 30px;
            position: absolute;
            top: 120px;

            /* display: none; */
            z-index: 1000;
        }

        .ziti1 .bobo {
            top: -5px;
            position: absolute;
            line-height: 40px;
        }

        .ziti .bobo {
            position: absolute;
        }

        .baoguo {
            position: absolute;
        }

        .baoguo1 {
            position: absolute;
            top: 0;
            left: 180px;
        }

        .bottom {
            width: 180px;
            height: 30px;
            /* border:1px solid ; */
            position: absolute;
            top: 120px;
        }

        .baoguo .bottom {
            bottom: -1px;
        }

        .baoguo1 .bottom {
            bottom: -1px;
        }

        .bobo {
            color: white;
            line-height: 30px;

            left: 30px;
        }

        .dakuang {
            position: relative;
            height: 150px;
            /* border:1px solid; */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script src="./jquery.js"></script>
    <div class="box">
        <div class="shang">
            <span class="zhuang">专辑推荐</span>
        </div>
        <div class="xia">
            <ul>
                <li>
                    <div class="dakuang">
                        <div class="baoguo">
                            <img src="./img/1_1.jpg" alt="">

                        </div>
                        <div class="ziti">
                            <div class="bottom">
                                <span class="bobo">bobo/可可尼</span>
                            </div>
                        </div>
                        <div class="baoguo1">
                            <img src="./img/1_2.jpg" alt="">

                        </div>
                        <div class="ziti1">
                            <div class="bottom">
                                <span class="bobo">带走一支美丽的徇烂</span>
                            </div>
                        </div>
                    </div>


                </li>
                <li>
                    <div class="dakuang">
                        <div class="baoguo">
                            <img src="./img/2_1.jpg" alt="">

                        </div>
                        <div class="ziti">
                            <div class="bottom">
                                <span class="bobo">bobo/可可尼</span>
                            </div>
                        </div>
                        <div class="baoguo1">
                            <img src="./img/2_2.jpg" alt="">

                        </div>
                        <div class="ziti1">
                            <div class="bottom">
                                <span class="bobo">带走一支美丽的徇烂</span>
                            </div>
                        </div>
                    </div>


                </li>
                <li>
                    <div class="dakuang">
                        <div class="baoguo">
                            <img src="./img/3_1.jpg" alt="">

                        </div>
                        <div class="ziti">
                            <div class="bottom">
                                <span class="bobo">bobo/可可尼</span>
                            </div>
                        </div>
                        <div class="baoguo1">
                            <img src="./img/3_2.jpg" alt="">

                        </div>
                        <div class="ziti1">
                            <div class="bottom">
                                <span class="bobo">带走一支美丽的徇烂</span>
                            </div>
                        </div>
                    </div>


                </li>

            </ul>
        </div>
    </div>
</body>

</html>
<script>
    $('.dakuang').hover(function () {
        $(this).find('.baoguo')
            .stop()
            .animate({ left: -179 }, 1000)
        $(this).find('.baoguo1')
            .stop()
            .animate({ left: 0 }, 1000)
    }, function () {
        $(this).find('.baoguo')
            .stop()
            .animate({ left: 0 }, 1000)
        $(this).find('.baoguo1')
            .stop()
            .animate({ left: 180 }, 1000)
    })

    $('.dakuang').hover(function () {
        $(this).find('.ziti')
            .stop()
            .animate({ top: 22 }, 300)
        $(this).find('.ziti1')
            .stop()
            .animate({ top: 0 }, 300)


    }, function () {
        $(this).find('.ziti')
            .stop()
            .animate({ top: 0 }, 300)
        $(this).find('.ziti1')
            .stop()
            .animate({ top: 40 }, 300)


    });

</script>